*{
  margin:0;
  padding:0;
}

/*上层元素*/


body{
  background-color: #2A2F39;
}
.top{
  width:100%
}
 .img7{
position: absolute;
width: 37px;
height: 37px;
left: 15px;
top: 105px;
 }
.sn{
  display:inline-block;
   position: absolute;
width: 115px;
height: 52px;
left: 59px;
top: 93px;

font-family: Noto Sans SC;
font-style: normal;
font-weight: bold;
font-size: 36px;
line-height: 52px;
color: #FFFFFF;
 }
 .img13{
position: absolute;
width: 25px;
height: 25px;
left: 233px;
top: 109px;
 }
 .verticalBar1 {
   display:inline-block;
position: absolute;
width: 40px;
height: 0px;
left: 256px;
top: 121px;

border: 1px solid #FFFFFF;
transform: rotate(90deg);
    }

 .img8 {
   position: absolute;
   width: 25px;
   height: 25px;
   left: 293px;
   top: 111px;

   background: linear-gradient(0deg, #90BCFE, #90BCFE), url('../../static/image 13.png');
   background-blend-mode: darken, normal;
 }

 .mst{
   display:inline-block;
 position: absolute;
width: 100px;
height: 29px;
left: 326px;
top: 107px;

font-family: Noto Sans SC;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 29px;
/* identical to box height */


color: #90BCFE;
 }
 .verticalBar2 {
display:inline-block;
position: absolute;
width: 40px;
height: 0px;
left: 424px;
top: 121px;

border: 1px solid #FFFFFF;
transform: rotate(90deg);
    }
.bpm{
  display:inline-block;
  position: absolute;
width: 39px;
height: 21px;
left: 465px;
top: 112px;

font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 21px;
/* identical to box height */


color: #C5C5C5;
}
.br{
  display:inline-block;
  position: absolute;
width: 35px;
height: 35px;
left: 511px;
top: 105px;

font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 35px;

color: #90BCFE;

}
.imgunion1{
  position: absolute;
width: 17px;
height: 13px;
left: 577px;
top: 116px;
transform: rotate(-180deg);
}
.img1{
 position: absolute;
width: 20px;
height: 20px;
left: 615px;
top: 112px;
}
.vc2{
position: absolute;
width: 12.5px;
height: 15px;
left: 659px;
top: 115px;
}
.imgunion2{
position: absolute;
width: 17px;
height: 13px;
left: 696px;
top: 116px;
transform: rotate(-180deg);
}
.rec179{
  position: absolute;
width: 40px;
height: 40px;
left: 226px;
top: 102px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 8px;
}
.rec115{
  position: absolute;
width: 40px;
height: 40px;
left: 566px;
top: 102px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
}
.rec113{
position: absolute;
width: 40px;
height: 40px;
left: 605px;
top: 102px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
}
.rec123{
position: absolute;
width: 40px;
height: 40px;
left: 644px;
top: 102px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
}
.rec114{
position: absolute;
width: 40px;
height: 40px;
left: 683px;
top: 102px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
}
.rec117{
position: absolute;
width: 40px;
height: 40px;
left: 857px;
top: 101px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
}
.rec118{
position: absolute;
width: 40px;
height: 40px;
left: 896px;
top: 101px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
}
.rec128{
position: absolute;
width: 40px;
height: 40px;
left: 970px;
top: 101px;

opacity: 0.5;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 8px;
}
.rec119{
position: absolute;
width: 80px;
height: 40px;
left: 1021px;
top: 101px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 8px;
}
.rec120{
position: absolute;
width: 80px;
height: 40px;
left: 1110px;
top: 101px;

opacity: 0.5;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 8px;
}
.rec121{
position: absolute;
width: 80px;
height: 40px;
left: 1199px;
top: 101px;

opacity: 0.5;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 8px;
}
.rec126{
position: absolute;
width: 40px;
height: 40px;
left: 1319px;
top: 101px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 8px;
}

.rec127{
position: absolute;
width: 40px;
height: 40px;
left: 1370px;
top: 101px;

border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 8px;
}
.verticalBar3{
position: absolute;
width: 40px;
height: 0px;
left: 810px;
top: 121px;

border: 1px solid #FFFFFF;
transform: rotate(90deg);
}
.img3{
position: absolute;
width: 27px;
height: 27px;
left: 864px;
top: 108px;
}
.img4{
position: absolute;
width: 25px;
height: 25px;
left: 903px;
top: 108px;
}
.img6{
position: absolute;
width: 23px;
height: 23px;
left: 978px;
top: 110px;
}
.aicw{

position: absolute;
width: 47px;
height: 23px;
left: 1037px;
top: 109px;

font-family: Noto Sans SC;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 23px;

color: #FFFFFF;
}
.mtp{
  position: absolute;
width: 64px;
height: 23px;
left: 1118px;
top: 109px;

font-family: Noto Sans SC;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 23px;

color: #FFFFFF;

opacity: 0.5;
}

.aim{
position: absolute;
width: 47px;
height: 23px;
left: 1215px;
top: 109px;

font-family: Noto Sans SC;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 23px;

color: #FFFFFF;

opacity: 0.5;
}
.verticalBar4{
position: absolute;
width: 40px;
height: 0px;
left: 1279px;
top: 121px;

border: 1px solid #FFFFFF;
transform: rotate(90deg);
}
.img2{
  position: absolute;
width: 26px;
height: 26px;
left: 1326px;
top: 108px;
}
.img5{
position: absolute;
width: 22px;
height: 22px;
left: 1379px;
top: 110px;
}
.line23{
position: absolute;
width: 1440px;
height: 0px;
left: 0px;
top: 165px;

border: 1px solid rgba(255, 255, 255, 0.5);
}

/*下层元素*/
/*标尺*/
.line div{
position: absolute;
width: 1440px;
height: 0px;
left: 0px;
top: 404px;

border: 1px solid rgba(255, 255, 255, 0.5);
}
/*钢琴和音符分割线*/
/*横线*/
.lineH{
position: absolute;
width: 0px;
height: 2170px;
left: 150px;
top: 100px;

border: 2px solid rgba(255, 255, 255, 0.7);
}
/*纵线*/
.lineV{
position: absolute;
width: 14160px;
height: 0px;
left: 0px;
top: 114px;

border: 2px solid rgba(255, 255, 255, 0.5);
}

 .black{
                  position: absolute;
                  width: 70px;
                  height: 20px;
                  left: 154px;
                  top: 208px;
                   background: #39404F;
                  z-index: 100;
            }
 .chosen{
    background:#FF0000;
  }
